<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-row>
      <el-col :span="24">
        <el-form
          ref="queryForm"
          :inline="true"
          :model="form"
          label-width="auto"
        >
          <el-form-item label="单位名称:" prop="">
            <el-select
              size="small"
              v-model="form.deptId"
              placeholder="请选择单位名称"
              filterable
              @change="handlerChange"
            >
              <el-option
                v-for="(item, index) in showDeptArr"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份:" prop="">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="请选择年份"
              size="small"
              :value-format="'yyyy'"
              :picker-options="pickeroOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">
              重置
            </el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="small"
              @click="handleExport"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-descriptions direction="vertical" :column="9" border>
          <el-descriptions-item label="当年总预算">
            {{ allMoney }}元
          </el-descriptions-item>
          <el-descriptions-item label="当年已用预算">
            {{ usedMoney }}元
          </el-descriptions-item>
          <el-descriptions-item label="当年剩余预算">
            {{ residueMoney }}元
          </el-descriptions-item>
        </el-descriptions></el-col
      >
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          class="table-border-line mt10"
          ref="excelTable"
          style="width: 100%; margin-bottom: 20px"
          row-key="fields"
          border
          height="600px"
          default-expand-all
          v-loading="loading"
        >
          <el-table-column
            label="指标名称"
            prop="name"
            align="center"
            width="400"
          >
            <template slot-scope="scope">
              <div class="extext-area" v-if="scope.row.numType === 3">
                <span>{{ scope.row.name }}</span>
                <span>{{ scope.row.extext }}</span>
              </div>
              <div v-else class="name-area">
                <span
                  :class="
                    scope.row.isChildren === 1
                      ? 'children1'
                      : scope.row.isChildren === 2
                      ? 'children2'
                      : scope.row.isChildren === 3
                      ? 'children3'
                      : scope.row.isChildren === 4
                      ? 'children4'
                      : scope.row.isChildren === 5
                      ? 'children5'
                      : ''
                  "
                >
                  {{
                    scope.row.isChildren === 3
                      ? "其中：" + scope.row.name
                      : scope.row.name
                  }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="计量单位"
            prop="unit"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            v-for="(item, index) in resultData"
            :key="index"
            :label="item.month"
            :prop="'bitch' + index"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.notInput">
                {{ noTabledata ? "" : "-" }}
              </span>
              <span v-else>{{ scope.row["bitch" + index] | numDealfilters}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </lb-layout>
</template>

<script>
import { exportExcel } from "@/utils/xlsx";
import tableConst from "@/views/work/accounts/newadd/components/tableConst.js";
import { listDept } from "@/api/standingbook/newstandingbook.js";
import {
  getStandingbookAnnual,
  getStandingbookFee,
} from "@/api/standingbook/statistics.js";
import {
  deepClone,
  replaceInteger,
  replaceDigit,
  recentlyYearMonth, dealElectricity,
} from "@/utils/index";
export default {
  filters: {
    numDealfilters(num) {
      if (null != num) {
        return dealElectricity(num, 1, 2)
      } else {
        return "";
      }
    },
  },
  components: {},
  data() {
    return {
      loading: false,
      allMoney: 0,
      usedMoney: 0,
      residueMoney: 0,
      tableData: [],
      resultData: [],
      form: {
        deptId: null,
        year: "",
      },
      choseDeptName: "",
      showDeptArr: [],
      pickeroOptions: {
        disabledDate(time) {
          let date = new Date();
          return time.getFullYear() > date.getFullYear();
        },
      },
      noTabledata: false,
    };
  },
  created() {
    this.getlistDept();
  },
  mounted() {
    this.getFormreset();
    this.$nextTick(() => {
      this.handleQuery();
    });
  },
  updated() {
    this.$refs.excelTable.doLayout();
  },
  methods: {
    getFormreset() {
      this.form.deptId = this.$store.state.user.deptId;
      let now = new Date().getFullYear();
      this.form.year = String(now);
    },
    setTableColumn() {
      let data = deepClone(tableConst.tableData);
      this.tableData = data.slice(0, -1);
    },
    getlistDept() {
      this.showDeptArr = [];
      listDept({})
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          if (arr.length > 0) {
            arr.map((item) => {
              let obj = {
                label: item?.deptName,
                value: item?.deptId,
              };
              this.showDeptArr.push(obj);
            });
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    getTableData(data) {
      this.resultData = [];
      this.loading = true;
      getStandingbookAnnual(data)
        .then((res) => {
          this.loading = false;
          this.tableHeight = 700;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let result = res?.data ?? [];
          this.resultData = result;
          if (this.resultData.length > 0) {
            this.noTabledata = false;
            this.resultData.map((item, index) => {
              this.tableData.map((tig) => {
                tig["bitch" + index] = item[tig.fields] ?? 0;
              });
            });
          } else {
            this.noTabledata = true;
            this.resultData = [{ month: "" }];
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    requestStandingbookFee(data) {
      getStandingbookFee(data)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.allMoney = dealElectricity(res?.data?.budgetFund ?? 0, 1, 2);
          this.usedMoney = dealElectricity(res?.data?.usedBudget ?? 0, 1, 2);
          this.residueMoney = dealElectricity(res?.data?.remainBudget ?? 0, 1, 2);
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.setTableColumn();
      let data = { ...this.form };
      this.getTableData(data);
      this.requestStandingbookFee(data);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.form = {
        deptId: null,
        year: "",
      };
      this.resetForm("queryForm");
      this.getFormreset();
      this.handleQuery();
    },
    handleExport() {
      if (this.noTabledata) {
        this.$message.warning("无月度台账内容导出,请确认!");
        return;
      }
      if (this.showDeptArr.length > 0) {
        this.showDeptArr.map((item) => {
          if (item.value == this.form.deptId) {
            this.choseDeptName = item?.label ?? "未知部门";
          }
        });
      }
      let fileName = this.choseDeptName + this.form.year;
      let cols = [{ wpx: 240 }];
      exportExcel(this.$refs.excelTable, fileName, cols);
    },
    handlerChange() {
      // console.log(this.form.deptId);
    },
  },
};
</script>

<style lang="scss" scoped>
.table-border-line {
  // border-top: 4px solid #d2d2d8;
  // border-bottom: 4px solid #d2d2d8;
  // padding: 20px 0 10px 0;
  // padding-top: 10px;
  margin-bottom: 10px;
}
.extext-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  span {
    &:nth-child(2) {
      margin-top: 20px;
    }
  }
}
.name-area {
  display: flex;
  align-items: flex-start;
  margin-left: 5px;
  .children1 {
    margin-left: 20px;
  }
  .children2 {
    margin-left: 40px;
  }
  .children3 {
    margin-left: 40px;
  }
  .children4 {
    margin-left: 100px;
  }
  .children5 {
    margin-left: 85px;
  }
}
.tag-area {
  margin-bottom: 20px;
  .el-tag {
    margin-right: 20px;
  }
}
::v-deep .el-descriptions-item__cell {
  text-align: center !important;
}
</style>
